<div class="row" ng-click="goHome()">
    <img src="{{assetsPath('masthead.png')}}">
</div>
<div class="row">
    <div class="col_md-12">&NonBreakingSpace;</div>
</div>
<div class="row">
    <div class="col_md-12 col-sm-12 col-xs-12 topicTitle">{{selectedCategory | uppercase}}</div>
</div>

<div class="row" ng-show="showTopicsHome">
    <div class="col_md-12 col-sm-12 col-xs-12">
        <div class="col_md-12 col-sm-12 col-xs-12">
            <div class="col_md-6 col-sm-6 col-xs-12">
                <div><button ng-click="getTopicsSearchPage()">Search Topics</button></div>
            </div>
            <div class="col_md-6 col-sm-6 col-xs-12">
                <div><button ng-click="getTopicEditorPage()">Create new topic</button></div>
            </div>
        </div>
    </div>
</div>

<div class="row" ng-show="showTopicsSearch">
    <div class="col_md-12 col-sm-12 col-xs-12">
        <div class="col_md-12 col-sm-12 col-xs-12">
            <div class="col_md-12">
            <div class="col_md-12"><button ng-click="getTopicsHomePage()">Back</button></div>
        </div>
            <div class="col_md-12">{{selectedTags}}</div>
            <div class="col_md-12" ng-show="selectedTags.length>0">
                <button ng-click="searchTags(selectedTags)" type="submit">Search topics</button>
                <hr>
            </div>
            <div class="col_md-12">
                <label>Select tags from below or enter text to narrow list of tags</label>
                <input type="text" ng-model="searchTagText" name="searchTagText" width="col_md-12">
            </div>
            <div class="col_md-12">
                <button ng-repeat="item in tagsInCategory | filter:searchTagText" class="btn btn-default btn-sm" ng-click="updateSearchTags(item.name)">{{item.name}}</button>
            </div>
        </div>
    </div>
    <div class="col_md-12 col-sm-12 col-xs-12">
        <div class="col_md-12 col-sm-12 col-xs-12">
            <div class="col_md-6" ng-repeat="topic in topicsList">
                <div><a ng-click="getTopicFromList(topic.uuid)">{{topic.descriptor}}</a></div>
            </div>
        </div>
    </div>
</div>

<div class="row" ng-show="showTopicBeingEdited">
    <div class="col_md-12 col-sm-12 col-xs-12">
        <div class="col_md-12 col-sm-12 col-xs-12">
            <div><button ng-click="getTopicsHomePage()">Back</button></div>
        </div>
        <div class="col_md-12 col-sm-12 col-xs-12">
            <div class="col_md-12 col-sm-12 col-xs-12"><hr></div>
        </div>
        <div class="col_md-12 col-sm-12 col-xs-12">
            <div class="col_md-12 col-sm-12 col-xs-12"><hr></div>
        </div>
        <div class="col_md-12 col-sm-12 col-xs-12">
            <div class="col_md-12 col-sm-12 col-xs-12">
                <div class="topicFormLabel col_md-12 col-sm-12 col-xs-12">Title<br>
                    <input placeholder="Title as it will appear in topic" class="col-md-6 col-sm-12 col-xs-12" ng-model="creatorTopic.title" maxlength="250" >
                </div>

                <div class="topicFormLabel col_md-12 col-sm-12 col-xs-12">Description<br>
                    <input placeholder="This will appear in lists." ng-model="creatorTopic.descriptor" class="col-md-6 col-sm-12 col-xs-12" maxlength="250">
                </div>
            </div>
        </div>
        <div class="col_md-12 col-sm-12 col-xs-12">
            <div class="col_md-12 col-sm-12 col-xs-12"><hr></div>
        </div>
        <div class="col_md-12 col-sm-12 col-xs-12">
            <div class="col_md-6 col-sm-6 col-xs-12">
                <div class="topicFormLabel col-md-12 col-sm-12 col-xs-12">
                    <div class="col_md-12 topicFormLabel">Questions</div>
                    <div ng-repeat="item in creatorTopic.items" class="col_md-12 col-sm-12 col-xs-12">
                        <div class="col-md-12 col-sm-12 col-xs-12"><label class="topicFormLabel">{{'Question ' + ( $index + 1 ) + ':' }}</label></div>
                        <div class="col-md-12 col-sm-12 col-xs-12"><input placeholder="Will appear in topic form" ng-model="item.text" maxlength="250" class="col-md-6 col-sm-12 col-xs-12"></div>
                        <div class="col-md-12 col-sm-12 col-xs-12"><input placeholder="Will appear as subheading." ng-model="item.title" maxlength="250" class="col-md-6 col-sm-12 col-xs-12" ></div>
                    </div>
                    <div class="col-md-12 col-sm-12 col-xs-12"><button ng-click="addQuestion()">Add a question</button></div>
                </div>
            </div>
            <div class="col_md-6 col-sm-6 col-xs-12">
                <div class="col_md-12 col-sm-12 col-xs-12">
                    <div class="col_md-12 topicFormLabel">Links</div>
                    <div class="col_md-12" ng-repeat="link in creatorTopic.links">
                        <div class="col-md-12 col-sm-12 col-xs-12"><label class="topicFormLabel">{{'Link ' + ( $index + 1 ) + ':'}}</label></div>
                        <div class="col-md-12 col-sm-12 col-xs-12"><input placeholder="Name" ng-model="link.name" class="col-md-6 col-sm-12 col-xs-12" maxlength="250"></div>
                        <div class="col-md-12 col-sm-12 col-xs-12"><input placeholder="Url" ng-model="link.url" class="col-md-6 col-sm-12 col-xs-12" maxlength="250"></div>
                    </div>
                    <div class="col-md-12 col-sm-12 col-xs-12"><button ng-click="addLink()">Add a link</button></div>
                </div>
            </div>
        </div>
        <div class="col_md-12 col-sm-12 col-xs-12">
            <div class="col_md-12 col-sm-12 col-xs-12"><hr></div>
        </div>

        <div class="col_md-12 col-sm-12 col-xs-12">
            <div class="col_md-12">{{creatorTopicTags}}</div>
            <div class="col_md-12">
                <label>Select tags from below or enter text to narrow list of tags</label>
                <input type="text" ng-model="topicTagSearchText" name="topicTagSearchText" width="col_md-12">
            </div>
            <div class="col_md-12">
                <button ng-repeat="item in tagsInCategory | filter:topicTagSearchText" class="btn btn-default btn-sm" ng-click="updateTopicTags(item.name)">{{item.name}}</button>
            </div>
        </div>
        <div class="col_md-12 col-sm-12 col-xs-12">
            <div class="col_md-12 col-sm-12 col-xs-12"><hr></div>
        </div>
        <div class="col_md-12 col-sm-12 col-xs-12">
            <div class="col_md-12">
                <div class="col_md-12 col-sm-12 col-xs-12">
                    <div class="col-md-12 col-sm-12 col-xs-12"><button ng-click="doNotSave()">Do not save</button><button ng-click="save()">Save</button></div>
                </div>
            </div>
        </div>
    </div>
</div>
